<template>
  <div id="app">
    <a href="" class="ccc">#ccc</a>
    <div v-if="courseData.length==0">没有任何课程信息</div>
    <div v-else>

      <transition-group name="fade">
        <p @click="courseSelectedIndex=item"
           :class="{activeCourse:courseSelectedIndex === item}"
           v-for="item in courseData"
           :key="item.name"> {{ item.name }} 价格是：{{item.price | priceFilter('$')}}</p>
      </transition-group>

    </div>
  <HelloWorld/>
  </div>
</template>

<script s>
import { coursePost } from "@/api/course.js";
import HelloWorld from "@/components/HelloWorld";
export default {
  name: "app",
  filters: {
    priceFilter: function (value, symbol = '$') {
      return symbol + value;
    }
  },
  data () {
    return {
      courseSelectedIndex: "",
      courseData: []
    }
  },
  created () {
    this.curseFun()
  },
  methods: {
    curseFun () {
      coursePost().then((data) => {
        this.courseData = data
        console.log(data)
      })
    }
  },
  components: {
    HelloWorld
  }
};
</script>

 <style lang="scss">
<<<<<<< HEAD
=======
 $ccc:#ccc;
 .ccc{
   color:$ccc
 }
>>>>>>> 1da08e6a63f9696f3db33829b65cfade353d652f
.activeCourse {
  background: #ccc;
}
.trasitionDiv {
  width: 200px;
  height: 200px;
  background: red;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 1.5s;
}
.fade-leave-active {
  transition: opacity 1.5s;
}

.trasitionDiv {
  width: 200px;
  height: 200px;
  background: red;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

<style scoped lang="scss">
#app{border:1px solid #ccc;}
#app .hello{border:1px solid red;}
 
#app  {
   /deep/ .hello .p1 { 
     color:red
   }
} 
</style>
